<template>
  <div >
    <x-header :right-options="{showMore: false}" @on-click-more="showMenus = false">搜索</x-header>
      <search
              :auto-fixed="false"
              :results="tishi"
              v-model="keyword"
              position="static"
              auto-scroll-to-top
              top="46px"
              @on-focus="onFocus"
              @on-cancel="onCancel"
              @on-submit="onSubmit"
              ref="search"></search>
    <scroller lock-x height="-100" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="50">
      <panel :list="foodlist" type="1"></panel>
    </scroller>

    <div v-transfer-dom>
      <loading v-model="loading"></loading>
    </div>
    <toast v-model="toast" type="text" :time="800" is-show-mask text="未找到匹配的食物" >未发现数据</toast>
  </div>


</template>

<script>

  import {Scroller,Panel, Loading ,Search,XHeader, TransferDomDirective as TransferDom,Toast   } from 'vux'

  export default {
    name: 'hello',
    directives: {
      TransferDom
    },
    components: {
      Scroller,Panel,Loading ,Search,XHeader,Toast
    },
    data () {
      return {
        apiUrl: apiUrl,
        apiImgPath:apiImgPath,
        loading:false,
        toast:false,
        tishi: [],
        foodlist:[],
        keyword: '',
      }
    },
    mounted() {
      this.$nextTick(function () {
        this.setFocus();
      })

    },
    methods: {
      //搜索
      setFocus () {
        this.$refs.search.setFocus();
      },
      onSubmit () {
        this.loading = true;
        this.$http.get(this.apiUrl + 'Food/search', {
          params: {
            'keyword': this.keyword
          }
        }).then(response => {
          var data = response.data;
          var result =[];
          console.log(data);
          data.forEach((item, index)=> {
            var food = {
              src: item.thumb ? this.apiImgPath + item.thumb : '',
              title: item.name,
              desc: item.description,
              url: '/Food/' + item.id
            };
            result.push(food);
          });
          this.foodlist = result;

          this.loading=false;
          if(this.foodlist.length==0){
            this.toast = true;
          }
        }, response => {
          this.loading=false;
          console.log(response);
        });
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
        this.loading = false;
      },
      onScrollBottom () {
        console.log('end')
      },
      onScroll (pos) {
        this.scrollTop = pos.top
      },
      changeList () {
        this.$nextTick(() => {
          this.$refs.scroller.reset({
            top: 0
          })
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
